/*
* @Title: 注册模块
* @Created by: gsjPC
*/
<template>
	<view class="regWrap">
		<comHeader :config="navConfig" />
		<view class="dlWrap">
			<view class="regTit">注册账号</view>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>手机号</text>
					<input type="text" placeholder="请输入手机号" placeholder-style="color:#CCCCCC" placeholder-class="placecLass" @input="focusClass1"
					 :class="[isActive1 ? 'blueBorder' : '']" />
				</view>
			</view>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>邮箱</text>
					<input type="text" placeholder="填写邮箱账号" placeholder-style="color:#CCCCCC" placeholder-class="placecLass" @input="focusClass1"
					 :class="[isActive1 ? 'blueBorder' : '']" />
				</view>
			</view>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>账户ID</text>
					<input type="text" placeholder="填写账户ID" placeholder-style="color:#CCCCCC" placeholder-class="placecLass" @input="focusClass1"
					 :class="[isActive1 ? 'blueBorder' : '']" />
				</view>
			</view>
			<text class="Errortips">此账户ID重复,请重新设定</text>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>设置密码</text>
					<input type="password" placeholder="填写密码" placeholder-style="color:#CCCCCC" placeholder-class="placecLass" @input="focusClass1"
					 :class="[isActive1 ? 'blueBorder' : '']" />
				</view>
			</view>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>确认密码</text>
					<input type="password" placeholder="再次确认密码" placeholder-style="color:#CCCCCC" placeholder-class="placecLass"
					 @input="focusClass1" :class="[isActive1 ? 'blueBorder' : '']" />
				</view>
			</view>
			<view class="regTit">密保问题</view>
			<view class="protection">
				<view class="displayfiex">
					<view class="title">问题一</view>
					<view class="selectdata">
						<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						 :style_Container="'height: 63upx; font-size: 30upx; color:#333333;'" :placeholder="'placeholder'" :initValue="'您父亲的名字'"
						 :selectHideType="'hideAll'">
						</xfl-select>
					</view>
				</view>
				<view class="displayfiex paddingtop">
					<view>答案</view>
					<view><input class="inputwidth" type="text" placeholder="请输入答案" placeholder-style="color:#CCCCCC"
						 placeholder-class="placecLass" @input="focusClass1" :class="[isActive1 ? 'blueBorder' : '']" /></view>
				</view>
			</view>
			<view class="protection">
				<view class="displayfiex">
					<view class="title">问题二</view>
					<view class="selectdata">
						<xfl-select :list="lista" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						 :style_Container="'height: 63upx; font-size: 30upx; color:#333333;'" :placeholder="'placeholder'" :initValue="'您母亲的名字'"
						 :selectHideType="'hideAll'">
						</xfl-select>
					</view>
				</view>
				<view class="displayfiex paddingtop">
					<view>答案</view>
					<view><input class="inputwidth" type="text" placeholder="请输入答案" placeholder-style="color:#CCCCCC"
						 placeholder-class="placecLass" @input="focusClass1" :class="[isActive1 ? 'blueBorder' : '']" /></view>
				</view>
			</view>
			<view class="protection">
				<view class="displayfiex">
					<view class="title">问题三</view>
					<view class="selectdata">
						<xfl-select :list="listb" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						 :style_Container="'height:63upx; font-size: 30upx; color:#333333;'" :placeholder="'placeholder'" :initValue="'您高中的班主任'"
						 :selectHideType="'hideAll'">
						</xfl-select>
					</view>
				</view>
				<view class="displayfiex paddingtop">
					<view>答案</view>
					<view><input class="inputwidth" type="text" placeholder="请输入答案" placeholder-style="color:#CCCCCC"
						 placeholder-class="placecLass" @input="focusClass1" :class="[isActive1 ? 'blueBorder' : '']" /></view>
				</view>
			</view>
			<view class="xyTips">
				  <checkbox-group><checkbox value="cb" color="#6097FE" style="transform:scale(0.7)" /> </checkbox-group>
				已阅读并同意<text @tap="goXy">《#####协议》</text>
			</view>
			<view class="nextStep" @tap="nextStep">下一步</view>
		</view>
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	export default {
		components: {
			xflSelect
		},
		data() {
			return {
				navConfig: {
					comScroll:0,
					isFixed: false,
					left: {
						text: '',
						isShowLeft: true,
						leftGobackColor: 'black',
						leftTextColor: 'black',
					},
					mid: {
						isShowMid: true,
						text: '注册账号'
					},
					right: {
						text: '',
						isShowRight: false,
					}
				},
				list: [ //要展示的数据
					'您你父亲的名字',
					'您母亲的名字',
					'您高中的班主任',
				],
				lista: [ //要展示的数据
					'您你父亲的名字',
					'您母亲的名字',
					'您高中的班主任',
				],
				listb: [ //要展示的数据
					'您你父亲的名字',
					'您母亲的名字',
					'您高中的班主任',
				],
			}
		},
		methods: {
			goXy() {
				uni.navigateTo({
					url: '/pages/login/userXy'
				})
			},
			nextStep() {
				uni.navigateTo({
					url: "/pages/login/logGetYzm"
				})
			}
		}
	}
</script>

<style>
	.regWrap{
		margin-bottom:75upx;
	}
	.regTit {
		color: #333333;
		font-size: 40upx;
		margin-bottom: 80upx;
		margin-top: 70upx;
		font-weight: bold;
	}

	.dlWrap {
		margin: 116upx 62upx 0 62upx;
	}

	.dlInput_psd {
		margin-top: 32upx;
		padding-bottom: 20upx;
		height: 46upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1upx solid #DCDCDC;
		justify-content: space-between;
	}

	.dlInput_psd text {
		color: #333333;
		font-size: 28upx;
	}

	.dlInput_psd input {
		margin-left: 70upx;
		height: 46upx;
		line-height: 46upx;
		color: #333;
		font-size: 28upx;
	}

	.dlInput_numb {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.Errortips {
		color: #E02828;
		font-size: 22upx;
		margin-top: 18upx;
	}

	.xyTips {
		font-size: 22upx;
		color: #999999;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 24upx;
		margin-top: 170upx;
	}

	.xyTips text {
		color: #284D91;
	}

	.nextStep {
		height: 88upx;
		line-height: 88upx;
		border-radius: 88upx;
		font-size: 28upx;
		background: linear-gradient(left, #54AAFF, #568FFF);
		text-align: center;
		color: #ffffff;
	}

	.protection {
		font-size: 30upx;
		margin-top:55upx ;
	}

	.selectdata {
		width: 481upx;
	}

	.displayfiex {
		display: flex;
		justify-content: space-between;
	}
.displayfiex input{
	font-size:28upx ;
}
	.title {
		line-height: 62upx;
	}

	.inputwidth {
		width: 481upx;
		border-bottom: 1px solid #DCDCDC;
	}

	.paddingtop {
		padding-top: 40upx;
	}
</style>
